<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 表单验证 jQuery Validation</title>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加热映影片</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="hotForm" action="/admin/hot/store" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">海报图片：</label>
                            <div class="col-sm-8 input-group">
                                <!-- 上传封图海报  -->
                                <input name="file" class="form-control" type="file">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>
                                    请上传png|jpg|gif类型图片</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">影片名称：</label>
                            <div class="col-sm-8 input-group">
                                <input id="lastname" name="name" class="form-control" type="text" aria-required="true"
                                    aria-invalid="false" class="valid">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>
                                    影片名称不能为空</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">热度：</label>
                            <div class="col-sm-8 input-group">
                                <input id="password" name="hot" class="form-control" type="number">
                            </div>
                        </div>
                        <div class="form-group" id="data_1">
                            <label class="col-sm-3 control-label">上映日期：</label>
                            <div class="date col-sm-8 input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="form-control" name="dt" value="2014-11-11">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">演员：</label>
                            <div class="col-sm-8 input-group">
                                <input id="email" name="actor" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit">添加影片</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- jQuery Validation plugin javascript-->
    <!-- jquery validate核心库 -->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>
    <!-- jquery validate的汉化包 -->
    <script src="js/plugins/validate/messages_zh.min.js"></script>

    <!-- <script src="js/demo/form-validate-demo.js"></script> -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script>
        // 前端的表单验证 jquer validate
        $('#hotForm').validate({
            // 规则
            rules: {
                // 表单项的name名称
                name: { // 规则
                    // 影片名称的表单项不能为空
                    required: true
                },
                hot: {
                    required: true,
                    min: 1,
                    max: 10
                    // isphone: true
                }
            },
            messages: {
                // 规则中的name名称
                name: {
                    required: '不能为空，必须要写'
                }
            },
            submitHandler: function (form) {
                // 此处方法，让from的html默认行为取消

                // alert("提交事件!");
                // 普通表单提交，可以在此处写ajax提交
                form.submit();
            }
        })

        // 自定义校验规则
        jQuery.validator.addMethod("isphone", function (value, element) {
            // var tel = /(\+86-)?1[3-9]\d{9}$/
            var tel = /^1[3-9]\d{9}$/
            // 如果返回true则验证通过，false验证不通过
            return tel.test(value)
        }, "手机号码不合法");

        // 日期控制
        $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
    </script>

</body>

</html>